<?php
use yii\bootstrap\ActiveForm;
?>
<link rel="stylesheet" href="../static/dist/css/AdminLTE.min.css" type="text/css">
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/datatables/jquery.dataTables.css" type="text/css">
<link rel="stylesheet" href="../static/css/admin.css" type="text/css">
<link rel="stylesheet" href="../static/jBox/Skins/Metro/jbox.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/bootstrap-select/css/bootstrap-select.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/datepicker/datepicker3.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/daterangepicker/daterangepicker.css" type="text/css">
<style>
    .dataTable>tbody>tr>td {
        vertical-align: middle;
        font-size: 0.8em;
        padding: 8px 18px;
    }
    .dataTable>thead>tr>th {
        vertical-align: middle;
        font-size: 0.8em;
    }
    .examine-content .input-group {
        margin-bottom: 20px;
        height: 30px ;
        line-height: 30px;
    }
    .examine-content button{
        margin: 10px;
    }
    #table_id_example th, td {
        white-space: nowrap;
    }
    .col-md-12 div,label{ padding: 5px }
    #table_match_list tbody>tr{ font-size: 12px }

    .switch input { width: 30px; height: 30px ;position: absolute; margin-top: -7px; margin-left: 20px}
</style>
<div class="tabs-panel">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    名称：<input class="depart-input" id="searchName" style="width: 160px" type="text">&nbsp;
                    内部名称：<input class="depart-input" id="searchInsideName" style="width: 160px" type="text">&nbsp;
                    分类：<select class="depart-input" id="searchCategory" style="width: 160px">
                            <option value="">选择分类</option>
                            <?php foreach($category as $value) { ?>
                                <option value="<?= $value['categoryId']?>"><?= $value['name']?></option>
                            <?php }?>
                        </select>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary depart-modal" id="select_button" style="width: 80px;">查询</button>&nbsp;
                    <button type="button" class="btn btn-warning depart-modal" id="reset_button" style="width: 80px;">重置</button>
                </div>
                <div class="box-body">
                    <a type="button" class="btn btn-success depart-modal" id="add-btn" style="width: 80px;">添加</a>
                    <table id="table_id_example" class="display">
                        <thead>
                        <tr>
                            <th style="width: 15%">操作</th>
                            <th style="width: 10%">ID</th>
                            <th style="width: 10%">分类</th>
                            <th style="width: 15%">名称</th>
                            <th style="width: 15%">内部名称</th>
                            <th style="width: 15%">原始定价</th>
                            <th style="width: 15%">包装售价</th>
                            <th style="width: 15%">主产品</th>
                            <th style="width: 10%">排序</th>
                            <th style="width: 10%">状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="show-add-modal" style="background: rgba(236, 230, 230, 0.3);" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="box-body">
                    <?php $form = ActiveForm::begin(['id' => 'add_product_form']); ?>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">分类</label>
                        <div class="col-sm-6">
                            <input id="id" name="id" type="hidden">
                            <select class="form-control" id="categoryId" name="categoryId">
                                <option value="">选择分类</option>
                                <?php foreach($category as $value) { ?>
                                    <option value="<?= $value['categoryId']?>"><?= $value['name']?></option>
                                <?php }?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">名称</label>
                        <div class="col-sm-6">
                            <input class="form-control" id="name" name="name">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">内部名称</label>
                        <div class="col-sm-6">
                            <input class="form-control" id="inside_name" name="inside_name">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">原始定价</label>
                        <div class="col-sm-6">
                            <input class="form-control" id="price" name="price">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">包装售价</label>
                        <div class="col-sm-6">
                            <input class="form-control" id="pack_price" name="pack_price">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">排序</label>
                        <div class="col-sm-6">
                            <input class="form-control" id="sort" name="sort">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">启用/禁用</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="useflg" name="useflg">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <?php ActiveForm::end() ?>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add-product-btn">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="show-match-modal" style="background: rgba(236, 230, 230, 0.3);" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">关联商品</h4>
            </div>
            <div class="modal-body">
                <div class="box-body">
                    <input type="hidden" id="itemId">
                    <input id="keyName" class="depart-input" style="width: 200px" placeholder="产品名称/编号">&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary depart-modal" id="select_match_button" style="width: 80px;">添加</button>&nbsp;
                    <table id="table_match_list" class="table table-bordered table-hover" style="margin-top: 10px">
                        <thead>
                        <tr>
                            <th style="width: 25%">编号</th>
                            <th style="width: 25%">名称</th>
                            <th style="width: 25%">分类</th>
                            <th style="width: 25%">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add-macth-btn">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 固定js -->
<script type="text/javascript" src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../static/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="../static/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript" src="/static/plugins/treeTable/jquery.treetable.js"></script>
<!-- 自定义js -->
<script type="text/javascript" src="../static/plugins/moment/moment.min.js"></script>
<script type="text/javascript" src="../static/plugins/bootstrap-select/js/bootstrap-select.js"></script>
<script type="text/javascript" src="../static/plugins/bootstrap-select/js/defaults-zh_CN.js"></script>
<script type="text/javascript" src="../static/plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="../static/plugins/datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/static/app/global.js?version=<?=Yii::$app->params['version']?>"></script>
<script type="text/javascript">
    var table = null;
    $(function () {

        table = $('#table_id_example').DataTable({
            dom: '<"top">rt<"bottom"flip><"clear">',
            language: {
                "sUrl": '../static/plugins/datatables/language.json'
            },
            "searching": false,
            "ordering": false,
            "serverSide": true,
            ajax: {
                url: '/product/sale-product-list',
                type: 'post',
                data: function (d) {
                    d.name = $('#searchName').val();
                    d.inside_name = $('#searchInsideName').val();
                    d.category = $('#searchCategory').val();
                },
                error: getError
            },
            aoColumns: [
                {"data": ""},
                {"data": "itemId"},
                {"data": "categoryName"},
                {"data": "name"},
                {"data": "inside_name"},
                {"data": "price"},
                {"data": "pack_price"},
                {"data": "keyName"},
                {"data": "sort"},
                {"data": "useflg"},
            ],
            columnDefs: [
                {
                    "targets": [0],
                    "orderable": false,
                    "searchable": false,
                    "render": function (data, type, full) {
                        return '<a name="showMatch" data-id="' + full.itemId + '">关联产品</a>';
                    }
                },
                {
                    "targets": [3],
                    "orderable": false,
                    "searchable": false,
                    "render": function (data, type, full) {
                        return '<a name="showDtl" data-id="' + full.AutoId + '">' + data + '</a>';
                    }
                },
                {
                    "targets": [-1],
                    "orderable": false,
                    "searchable": false,
                    "render": function (data, type, full) {
                        return data == 1 ? '启用' : '禁用';
                    }
                }
            ]
        });

        //搜索
        $("#select_button").on('click', function () {
            table.ajax.reload();
        });

        //重置
        $("#reset_button").on('click', function () {
            $('#searchName').val('');
            $('#searchInsideName').val('');
            $('#searchCategory').val('');
            table.ajax.reload();
        });

        //新增model
        $('#add-btn').on('click', function () {
            $('#id').val('');
            $('#categoryId').val('');//.removeAttr('disabled')
            $('#name').val('');
            $('#inside_name').val('');
            $('#sort').val('');
            $('#useflg').val('1');
            $('#show-add-modal').modal('show');
        });

        //详情
        $(document).on('click', 'a[name=showDtl]', function () {
            $.post('/product/sale-product-dtl', {id: $(this).attr('data-id')},
                function (o) {
                    if (o.code == 200) {
                        $('#show-add-modal').modal('show');
                        var product = o.data;
                        $('#id').val(product['AutoId']);
                        $('#categoryId').val(product['categoryId']); //.attr('disabled', true);
                        $('#name').val(product['name']);
                        $('#inside_name').val(product['inside_name']);
                        $('#price').val(product['price']);
                        $('#pack_price').val(product['pack_price']);
                        $('#sort').val(product['sort']);
                        $('#useflg').val(product['useflg']);
                    }
                },
                'json'
            );
        });

        //保存
        $('#add-product-btn').on('click', function () {

            if ($('#categoryId').val() == '') {
                $.jBox.error('请选择分类', '错误');
                return;
            }
            if ($('#name').val() == '') {
                $.jBox.error('请输入名称', '错误');
                return;
            }
            if ($('#inside_name').val() == '') {
                $.jBox.error('请输入内部名称', '错误');
                return;
            }
            if ($('#price').val() == '') {
                $.jBox.error('请输入原始定价', '错误');
                return;
            }
            if ($('#pack_price').val() == '') {
                $.jBox.error('请输入包材售价', '错误');
                return;
            }

            if(!$.isNumeric($('#price').val())){
                $.jBox.error('请输入正确的原始定价', '错误');
                return;
            }

            if(!$.isNumeric($('#pack_price').val())){
                $.jBox.error('请输入正确的包材售价', '错误');
                return;
            }

            var sort = $('#sort').val();

            if (sort == '') {
                $.jBox.error('请输入排序值', '错误');
                return false;
            } else if (!$.isNumeric(sort)) {
                $.jBox.error('请输入正确的排序值', '错误');
                return false;
            }

            var param = $('#add_product_form').serialize();
            $.post(
                '/product/save-sale-product',
                param,
                function (data) {
                    if (data.code == 200) {
                        $.jBox.tip('处理成功', 'success');
                        window.setTimeout(function () {
                            $('#show-add-modal').modal('hide');
                            table.draw(false);
                        }, 1000);
                    } else {
                        $.jBox.error(data.val, '错误');
                    }
                },
                'json'
            );
        });

        //查询关联产品
        $('#select_match_button').on('click', function () {
            if ($('#keyName').val() == '') {
                $.jBox.error('请输入产品名称/编号', '错误');
                return;
            }
            $.post('/product/search-product', {keyName: $('#keyName').val(), itemId: $('#itemId').val()},
                function (o) {
                    if (o.code == 200) {
                        if (o.data) {

                            var product = o.data;
                            var html = '';
                            html += '<tr style="background-color: #eee;">';
                            html += '   <td>' + product['productId'] + '</td>';
                            html += '   <td>' + product['name'] + '</td>';
                            html += '   <td>' + product['categoryName'] + '</td>';
                            html += '   <td><a name="del_match">删除</a>';
                            html += '   <span class="switch"><input name="mainFlg" type="radio" class="input-check"></span>';
                            html += '   <input name="match_productId" type="hidden" value="' + product['productId'] + '"></td>';
                            html += '</tr>';
                            $('#table_match_list tbody').prepend(html);
                        } else {
                            $.jBox.error('未找到商品数据', '错误');
                        }
                    } else {
                        $.jBox.error(o.val, '错误');
                    }
                },
                'json'
            );
        });

        //关联产品
        $(document).on('click', 'a[name=showMatch]', function () {

            $('#table_match_list tbody').empty();
            $('#show-match-modal').modal('show');
            $('#itemId').val($(this).attr('data-id'));

            $.post('/product/get-match-product', {itemId: $(this).attr('data-id')},
                function (o) {
                    if (o.code == 200) {
                        var html = '';
                        $.each(o.data, function (i, v) {
                            var keyFlg = v['key_productId'] ? 'checked' : '';
                            html += '<tr>';
                            html += '   <td>' + v['productId'] + '</td>';
                            html += '   <td>' + v['productName'] + '</td>';
                            html += '   <td>' + v['categoryName'] + '</td>';
                            html += '   <td><a name="del_match">删除</a>';
                            html += '       <span class="switch"><input name="mainFlg" type="radio" '+keyFlg+' class="input-check"></span>';
                            html += '       <input name="match_productId" type="hidden" value="' + v['productId'] + '"</td>';
                            html += '</tr>';
                        });
                        $('#table_match_list tbody').append(html);
                    }
                },
                'json'
            );
        });

        //删除关联产品
        $(document).on('click', 'a[name=del_match]', function () {
            $(this).parents('tr').remove();
        });

        //保存关联产品
        $('#add-macth-btn').on('click', function () {

            var productId = [], key_productId = '',
                itemId = $('#itemId').val(),
                mp = $('input[name=match_productId]');
            if (!mp.length) {
                $.jBox.error('请添加关联商品', '错误');
                return;
            }
            $.each(mp, function () {
                productId.push($(this).val());
                if ($(this).parents('tr').find('input').is(':checked')) {
                    key_productId = $(this).val();
                }
            });
            if (key_productId == '') {
                $.jBox.error('请设置主产品', '错误');
                return;
            }
            $.post('/product/save-match-product', {itemId: itemId, productId: productId, key_productId: key_productId},
                function (o) {
                    if (o.code == 200) {
                        $.jBox.tip('保存成功', 'success');
                        $('#show-match-modal').modal('hide');
                        table.draw(false);
                    } else {
                        $.jBox.tip(o.val, '错误');
                    }
                },
                'json'
            );
        });
    });
</script>